<template>
  <div class="left">
    <el-menu :default-active="activeIndex" class="el-menu-vertical-demo"> 
        <el-menu-item  @click="crunb('系统主页')" index="1" >
          <i class="el-icon-menu"></i>
          <span slot="title">系统主页</span>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-s-home"></i>
            <span slot="title">系统管理</span>
          </template>
            <el-menu-item index="2-1" @click="crunb('楼宇信息')">
              <i class="el-icon-office-building"></i>
              <span slot="title">楼宇信息</span>
            </el-menu-item>
            <el-menu-item v-if="user.position === 1 || user.position === 2 || user.position === 0" index="2-2" @click="crunb('房屋信息')">
              <i class="el-icon-s-home"></i>
              <span slot="title">房屋信息</span>
            </el-menu-item>
            <el-menu-item v-if="user.position === 1 || user.position === 2"  index="2-3" @click="crunb('公告管理')">
              <i class="el-icon-position"></i>
              <span slot="title">公告管理</span>
            </el-menu-item>
            <el-menu-item v-if="user.position === 1 || user.position === 2" index="2-4" @click="crunb('人员管理')">
              <i class="el-icon-user"></i>
              <span slot="title">人员管理</span>
            </el-menu-item>
            <el-menu-item index="2-5" v-if="user.position === 1 || user.position === 2 || user.position === 0" @click="crunb('缴费管理')">
              <i class="el-icon-coin"></i>
              <span slot="title">缴费管理</span>
            </el-menu-item>
            <el-menu-item index="2-6" v-if="user.position !== 4"  @click="crunb('维修上报')">
              <i class="el-icon-document"></i>
              <span slot="title">维修上报</span>
            </el-menu-item>
            <el-menu-item index="2-10" v-if="user.position !== 4"  @click="crunb('投诉建议')">
              <i class="el-icon-mobile"></i>
              <span slot="title">投诉建议</span>
            </el-menu-item>
            <el-menu-item index="2-8" @click="crunb('车位管理')"  >
              <i class="el-icon-truck"></i>
              <span slot="title">车位管理</span>
            </el-menu-item>
            <el-menu-item index="2-9" @click="crunb('操作日志')"  >
              <i class="el-icon-setting"></i>
              <span slot="title">操作日志</span>
            </el-menu-item>
        </el-submenu>
    </el-menu>  
  </div>
</template>

<script>
import Owner from "@/views/main/Owner.vue";
import { mapState,mapMutations } from "vuex"
export default {
  computed:{
      ...mapState("login",["user"])
    },
  data(){
    return {
      activeIndex: "1"
    }
  },
  methods:{
    ...mapMutations("ctumb",["setCtumb"]),
    crunb(name){
      this.setCtumb(name)
      localStorage.setItem(
                      "ctumb",
                      name
                    );
      //页面跳转
      let menu = '/'
      switch(name){
          case '系统主页': menu = '/index'; break;
          case '楼宇信息': menu = '/house'; break;
          case '房屋信息': menu = '/hostel'; break;
          case '公告管理': menu = '/notice'; break;
          case '人员管理': menu = '/owner';break;
          case '车位管理': menu = '/parkingLot';break;
          case '缴费管理': menu = '/payFees';break;
          case '维修上报': menu = '/maintenance';break;
          case '操作日志': menu = '/operateLog';break;
          case '投诉建议': menu = '/complaint';break;
          default:  menu = '/';
      }

      this.$router.push(menu)
    },
    // 根据路由设置高亮菜单项
    setActiveIndex() {
        const route = this.$route.path;
        switch (route) {
          case "/index": this.activeIndex = "1"; break;
          case "/house": this.activeIndex = "2-1"; break;
          case "/hostel": this.activeIndex = "2-2"; break;
          case "/notice": this.activeIndex = "2-3"; break;
          case "/owner": this.activeIndex = "2-4"; break;
          case "/parkingLot": this.activeIndex = "2-8"; break;
          case "/payFees": this.activeIndex = "2-5"; break;
          case "/maintenance": this.activeIndex = "2-6"; break;
          case "/workPerson": this.activeIndex = "2-7"; break;
          case "/operateLog": this.activeIndex = "2-9"; break;
          default: this.activeIndex = "1"; // 默认高亮系统主页
      }
    }
  },
  mounted() {
    // 初始化时根据当前路由设置高亮菜单项
    this.setActiveIndex();
  },
  watch: {
    // 监听路由变化，动态更新高亮菜单项
    $route() {
      this.setActiveIndex();
    },
  },
}
</script> 

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 195px;
    height: 92vh;
  } 
.el-menu-vertical-demo span{
    font-size: 15px;
}
</style>